<script setup>
import { onMounted, ref, watch } from "vue";
import router from '@/router/index.js'
const sectionsArr = ref([
  {
    title: "SCENE-1",
    name: "Monitoring",
    icon: "icon-smfyjiankong",
    path: '/monitoring'
  },
  {
    title: "SCENE-2",
    name: "EntranceGuard",
    icon: "icon-smfymenjin",
    path: '/entrance-guard'
  },
  {
    title: "SCENE-3",
    name: "Personnel",
    icon: "icon-smfyrenyuan",
    path: '/personnel'
  },
]);
const currentRouterName = ref(router.currentRoute.value.name);
function singleSelectSection(v) {
  if(!v.path) { return }
  router.push(v.path);
}
watch(
  () => { return router.currentRoute.value },
  (nV) => {
    currentRouterName.value = nV.name;
  },
  { immediate: true }
)
onMounted(() => {});
</script>

<template>
  <div class="bottom-section">
    <div
      class="bottom-section-item"
      :class="[
        currentRouterName === item.name? 'active': ''
      ]"
      v-for="(item, index) in sectionsArr"
      @click="singleSelectSection(item)"
      :key="index"
    >
    <i class="iconfont-smfy nav" :class="[
      item.icon
    ]"></i>
      <span>{{ item.title }}</span>
    </div>
  </div>
</template>

<style scoped lang="less">
.bottom-section {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  display: flex;
  & .bottom-section-item {
    cursor: pointer;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    & .nav {
      font-size: 40px;
    }
    &.active {
      color: gold;
    }
  }
}
</style>
